<html>
<link rel="stylesheet" href="/api-ui/static/bootstrap/css/bootstrap.min.css"/>
<script type="text/javascript" src="/api-ui/static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/api-ui/static/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/box.css"/>
<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/checkbox.css"/>
<script type="text/javascript" src="/api-ui/static/js/task/taskmanage.js"></script>
<style type="text/css">
    a {
        color: black;
    }

    a:hover {
        text-decoration: none;
    }

    .label-back {
        background-color: #6C7B8B;
        color: white;
    }

    .label-back:hover {
        color: white !important;
        background-color: #5c666b !important;
    }

    .block {
        display: inline-block;
        width: 20px;
    }

    .co {
        color: blue;
    }

    .bl {
        color: black;
    }

    .commen {
        cursor: pointer;
    }

</style>
<!--vue脚本库-->
<script type="text/javascript"
        src="/api-ui/static/js/vue/vue-3.2.4.global.js">
</script>
<!--axios脚本库-->
<script type="text/javascript"
        src="/api-ui/static/js/vue/axios-0.18.0.min.js">
</script>
<!--我们自己封装的axios函数库 -->
<script type="text/javascript"
        src="/api-ui/static/js/vue/axios-helper.js">
</script>
<body id="app">
<div class="row" style="padding-top: 10px;">
    <div class="col-md-2">
        <h1 style="font-size: 24px; margin: 0;" class="">角色管理</h1>
    </div>
    <div class="col-md-10 text-right">
        <a href="##"><span class="glyphicon glyphicon-home"></span> 首页</a> > <a
            disabled="disabled">角色管理</a>
    </div>
</div>
<div class="row" style="padding-top: 15px;">
    <div class="col-md-12 thistable">
        <!--id="container"-->
        <div class="bgc-w box box-primary">
            <!--盒子头-->
            <div class="box-header">
                <h3 class="box-title">
                    <a href="roleadd.html" class="label label-success" style="padding: 5px;">
                        <span class="glyphicon glyphicon-plus"></span> 新增
                    </a>
                </h3>
                <div class="box-tools">
                    <div class="input-group" style="width: 150px;">
                        <input type="text" class="form-control input-sm cha"
                               placeholder="查找..." v-model="condition"/>
                        <div class="input-group-btn">
                            <a class="btn btn-sm btn-default"  @click="queryByCondition">
                                <span class="glyphicon glyphicon-search"></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <!--盒子身体-->
            <div class="box-body no-padding">
                <div class="table-responsive">
                    <table class="table table-hover ">
                        <tr>

                            <th scope="col">名称</th>
                            <th scope="col">权限值</th>
                            <th scope="col">操作</th>
                        </tr>
                        <tr v-for="role in roleList">
                            <td><span>{{role.roleName}}</span></td>
                            <td><span>{{role.roleValue}}</span></td>
                            <td>
                                <a href="javascript:void(0)" class="label sheding" @click="set(role.roleId)">
                                    <span class="glyphicon glyphicon-asterisk"></span> 设定</a>
                                <a href="javascript:void(0)" class="label xiugai" @click="update(role.roleId)">
                                    <span class="glyphicon glyphicon-edit" ></span> 修改</a>
                                <a href="javascript:void(0)" class="label shanchu" @click="del(role.roleId)"><span
                                        class="glyphicon glyphicon-remove"></span> 删除</a></td>
                        </tr>
                    </table>
                </div>
            </div>
            <!--盒子尾-->
            <div class="box-footer no-padding" style="margin-top: -20px;">
                <div style="padding: 5px;">
                    <div id="page"
                         style="background: #fff; border: 0px; margin-top: 0px; padding: 2px; height: 25px;">
                        <div style="width: 40%; float: left;">
                            <div class="pageInfo" style="margin-left: 5px;">
                                共<span>{{sum}}</span>条 | 每页<span>{{size}}</span>条
                                | 共<span>{{pages}}</span>页
                            </div>
                        </div>
                        <div style="width: 60%; float: left;">
                            <div class="pageOperation">
                                <!--判断是否是第一页  -->
                                <a href="javascript:void(0)" class="btn btn-sm btn-default no-padding "
                                   style="width: 30px; height: 20px;" @click="goto(1)" > <span
                                        class="glyphicon glyphicon-backward"></span></a>
                                <a href="javascript:void(0)" class="btn btn-sm btn-default no-padding "
                                   style="width: 30px; height: 20px;" @click="previous()"> <span
                                        class="glyphicon glyphicon-triangle-left"></span></a>
                                <a href="javascript:void(0)" disabled="disabled" class="btn btn-default no-padding"
                                   style="width: 30px; height: 20px;">
                                    {{page.current}}
                                </a>
                                <!--判断是否是最后一页  -->
                                <a href="javascript:void(0)" class="btn btn-sm btn-default no-padding "
                                   style="width: 30px; height: 20px;" @click="next()"> <span
                                        class="glyphicon glyphicon-triangle-right"></span></a>
                                <a href="javascript:void(0)" class="btn btn-sm btn-default no-padding "
                                   style="width: 30px; height: 20px;" @click="goMax(maxPage)"> <span
                                        class="glyphicon glyphicon-forward"></span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="module">
    Vue.createApp({
        data() {
            return {
                //用户保存查询得到的角色列表
                roleList:[],
                //总数
                sum:null,
                //每页显示记录数
                size:null,
                //一共多少页
                pages:null,
                //默认分页查询的值
                page:{
                    current:1,
                    size:4
                },
                maxPage:null,
                condition:null
            }
        },
        created() {
            this.loadList();
        },
        methods: {
            queryByCondition(){
                if(this.condition ==null || this.condition==""){
                    alert("查询条件不能为空，否则查询全部呢");
                    this.loadList();
                }else {
                    requestGet("/api-core/aoaRole/queryList",{
                        page:this.page,
                        roleName:this.condition
                    }).then((data)=>{
                        this.roleList=data.records;
                        this.size=data.size;
                        this.sum=data.total;
                        this.pages=data.pages;
                    })
                }
            },
            loadList(){
                //查询角色列表
                requestGet("/api-core/aoaRole/queryList",this.page).then((data)=>{
                    console.info(data);
                    this.roleList=data.records;
                    this.sum=data.total;
                    this.size=data.size;
                    this.pages=data.pages;
                    //拿最大页码数
                    this.maxPage=Math.ceil(data.total/data.size);
                    console.info("最大页码数",this.maxPage);
                })
            },
            //跳转指定页码
            goto(num){
                if(this.page.current==num){
                    alert("当前已是首页");
                    return false;
                }
                //设置查询条件中的当前页码
                this.page.current=num;
                //查询
                this.loadList();
            },
            previous(){
                let cur=this.page.current;
                cur=(cur-1) < 1 ? 1:(cur-1);
                //将当前页码数赋值到模型层
                this.page.current=cur;
                //重新查询
                this.loadList();
            },
            next(){
                let cur=this.page.current;
                cur=(cur+1) > this.maxPage ? this.maxPage:(cur+1);
                //将当前页码数赋值到模型层
                this.page.current=cur;
                //重新查询
                this.loadList();
            },
            goMax(num){
                if(this.page.current==num){
                    alert("当前已是尾页");
                    return false;
                }
                //设置查询条件中的当前页码
                this.page.current=num;
                //查询
                this.loadList();
            },
            update(roleId){
                sessionStorage.setItem("roleId",roleId);
                window.location.href="/api-ui/page/roleedit.html";
            },
            del(roleId){
                let bool=confirm("确定要删除吗？删除后不可恢复哟");
                if(!bool){
                    return;
                }
                requestDelete("/api-core/aoaRole/delete",{
                    id:roleId
                }).then((data)=>{
                    if(data){
                        alert("删除成功");
                        this.loadList();
                    }else {
                        alert("删除失败");
                    }
                })
            },
            set(roleId){
                sessionStorage.setItem("roleId",roleId);
                window.location.href="/api-ui/page/roleset.html";
            }
        }
    }).mount("#app");
</script>
</html>


